Repository navigation
feat(ui): close the mobile story list when a story is selected - #968
officialasishkumar wants to merge 1 commit into
Conversation
On phones the story list lives in a bottom sheet drawer, and picking a story left the drawer open on top of it, so every selection needed a second gesture to dismiss the sheet before the story could be seen. Storybook for the web closes its mobile navigation once a story is chosen; do the same on device. Layout's setSelection, which both the tree rows and the search results call, now asks the mobile drawer to close after emitting SET_CURRENT_STORY. Expanding or collapsing a group or component doesn't go through setSelection, so the list stays open while browsing. On desktop the drawer isn't rendered and the ref is empty, so nothing changes there. The change is applied to both @storybook/react-native-ui and @storybook/react-native-ui-lite. Add a Layout test for @storybook/react-native-ui that toggles a group (drawer stays open) and then selects a story (drawer is closed once). Layout imports runtime values from storybook/internal, which ships ESM, so let babel-jest transform the storybook package as well. Closes storybookjs#924
🦋 Changeset detectedLatest commit: a436462 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Codex Review Summary: ❌ FailedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
honestly not sure where I stand on this one, I kinda like it working this way |
Issue: #924
What I did
On phones the story list is a bottom sheet, and choosing a story left it open on top of the story, so you had to swipe it away every time to see what you picked. Storybook for the web closes its mobile navigation when you choose a story (
api.setMobileNavigation(false)in the sidebarTree), so this does the same on device.Changes:
Layout'ssetSelectioncloses the mobile drawer after emittingSET_CURRENT_STORY, in both@storybook/react-native-uiand@storybook/react-native-ui-lite. Tree story rows and search results both callsetSelection, so both close the list. Expanding or collapsing a group or component doesn't go throughsetSelection, so the list stays open while you browse. On desktop the drawer isn't rendered and the ref is empty, so nothing changes there.Layout.test.tsxin@storybook/react-native-ui. It renders the layout, toggles a group and checks the drawer stays open, then selects a story and checksSET_CURRENT_STORYis emitted and the drawer is closed once. The test fails without the change.@storybook/react-native-ui-litehas no jest setup, so its one-line change isn't covered by a test.Layoutimports runtime values fromstorybook/internal/*, which ships as ESM, sostorybookis added totransformIgnorePatternsin thereact-native-uijest config.@storybook/react-native-uiand@storybook/react-native-ui-lite.This is the same call the issue's patch-package diff adds, applied to the lite UI as well.
How to test
pnpm --filter @storybook/react-native-ui testManually, run
examples/expo-exampleon a phone or phone simulator (pnpm example, orpnpm example:litefor the lite UI), open the story list from the bottom bar and pick a story. The list closes and the story is visible. Expanding or collapsing a group leaves the list open, and picking a story from search results closes it too. On a tablet-width or web desktop layout, the sidebar behaves as before.Closes #924